<template>
	<div class="container">
		<navigationBar title="我的钱包" :transparent="true"></navigationBar>
		<div class="bg"></div>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="head-box" :style="'margin-top:'+(150 - navigationBarHeight)+'rpx'">
				<div class="box-wrap">
					<div class="box-title">可提现</div>
					<div class="box-content">
						<div class="price">{{userInfo.balance}}<span class="unit">元</span></div>
						<div class="btn" @click="toBalanceWithdraw">一键提现</div>
					</div>
					<div class="box-bottom" @click="toBillDetail">查看明细</div>
				</div>
			</div>
			<div class="list">
				<template v-for="(item,index) in list">
					<!-- 商家 -->
					<div class="list-item" :key="index">
						<image class="left" :src="item.merchantAvatars || item.userAvatar" mode=""></image>
						<div class="right">
							<div class="head">
								<span class="name">{{item.merchantName ||item.userName}}</span>
								<span class="price">{{item.amount}}</span>
							</div>
							<div class="footer">
								<span
									class="desc">{{item.type == 1?'卖出商品':item.type == 2?'商家':item.type == 3?' ':'提现'}}</span>
								<span class="time">{{item.createTime}}</span>
							</div>
						</div>
					</div>
				</template>
			
			</div>

		</div>
		<uni-popup ref="withdrawPop" type="center" :maskClick="true">
			<div class="setPrice">
				<div class="price-title">提现金额</div>
				<div class="wrap-input">
					<input type="digit" v-model="withdrawAmount" placeholder-style="font-size: 20rpx;color: #BCBCBC;"
						placeholder="请输入金额" @input="withdrawNumber" />
				</div>
				<div class="bottom">
					<span class="cannel" @click="cannelWithdraw()">取消</span>
					<span class="yes on" @click="balanceWithdraw()">确定</span>
				</div>
			</div>
		</uni-popup>
		<view class="mask" v-if="show"></view>
		<view class="share-page">
			<image class="share-close" v-if="show" src="../../static/icon/close.png" mode="" @click="openMyCode">
			</image>
			<view class="share-page-box" v-if="show" id="box"
				:style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
				<wxml-to-canvas class="widget" :width="canvasWidth" :height="canvasHeight"></wxml-to-canvas>
			</view>
			<view @tap="extraImage" v-if="show">
				<button class="share-page-btn" :style="getBtnStyle">保存图片</button>
			</view>
		</view>
	</div>
</template>

<script>
	import data from '@/js/my/myShare/data.js';
	import methods from '@/js/my/myShare/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		data,
		methods,
		onLoad() {
			// this.getMyShareCode()
			// this.getPageData()
			this.getPageList()
			// 获取设备信息
			wx.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.screenWidth
					this.canvasWidth = this.screenWidth * 0.9
					this.canvasHeight = this.screenWidth * 1.1
				}
			});
		},
		onShow() {},
		onHide() {},
		components: {
			navigationBar,
			uniPopup
		},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo'])
		}
	};
</script>
<style>
	page,
	uni-page {
		background-color: #FAFAFA !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/myShare.scss';
</style>